import React, { useState, useEffect } from 'react'
import '../李璇/css/launch.css'
import { useNavigate } from "react-router-dom"
export default function Launch() {
    const [count, setCount] = useState(3); // 设置初始计数为3
    // 定时器
    useEffect(() => {
        if (count > 0) {
            // 当计数大于0时，设置一个定时器，每隔一秒减少计数
            const timer = setTimeout(() => {
                setCount(prevCount => prevCount - 1); // 减少计数器
            }, 1000);
            // 返回一个清除定时器的函数，确保每次重新渲染或者组件卸载时清除定时器
            return () => clearTimeout(timer);
        } else {
            // 当计数器为0时执行跳转逻辑
            if (count ===0) {
                navigate('/login'); // 使用你的导航函数跳转到'/login'页面
            }
        }
    }, [count]); // useEffect依赖于count变量，只有count变化时才会重新运行effect
    // 路由跳转
    const navigate = useNavigate()
    const login = () => {
        navigate("/login")
    }

    return (
        <div id='li_launch'>
            <div id='launch_timeout'>
                <div id='timeout_left'></div>
                <div id='timeout_right' onClick={login}>跳过&nbsp;&nbsp;{count}</div>
            </div>

            <div id='launch_content'>
                <img src='https://cdn7.axureshop.com/demo/1564251/images/%E5%90%AF%E5%8A%A8%E9%A1%B5/u1939.svg'></img>
                <h1>演&nbsp;出&nbsp;最&nbsp;高&nbsp;8&nbsp;折</h1>
            </div>

            <div id='launch_footer'>
                <div id='launch_footer1'>票</div>
                <div id='launch_footer2'>淘票</div>
                <div id='launch_footer3'>低&nbsp;价&nbsp;买&nbsp;好&nbsp;票</div>
            </div>

        </div>
    )
}
